<template>
  <div class="page">
    <!-- <m-input @input="value=arguments[0]" :value="value" /> 等于下面-->
    <m-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <m-form-item label="用户名" prop="username">
        <m-input v-model="ruleForm.username" />
      </m-form-item>
      <m-form-item label="密码" prop="password">
        <m-input v-model="ruleForm.password" type="password" />
      </m-form-item>
      <m-form-item>
        <button @click="submitForm('ruleForm')">立即创建</button>
      </m-form-item>
    </m-form>
  </div>
</template>

<script type="text/ecmascript-6">
import MInput from "@/components/Input";
import mFormItem from "@/components/FormItem";
import MForm from "@/components/Form";
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(submitForm) {
      this.$refs[submitForm].validate(valid => {
        if (valid) {
          console.log("成功");
        } else {
          console.log("失败");
        }
      });
    }
  },
  components: { MInput, mFormItem, MForm }
};
</script>

<style scoped>
</style>
